<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杞欢绉佷汉瀹氬埗棰勭害 - EV 瀹樻柟骞冲彴</title>
    <!-- 使用本地TailwindCSS替代CDN -->
    <link href="../../static/css/tailwind.min.css" rel="stylesheet">
    <!-- 使用本地Font Awesome替代CDN -->
    <link href="../../static/element/font-awesome.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F1F5F9'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .hover-scale {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-scale:hover {
                transform: translateY(-5px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 瀵艰埅鏍?-->
    <nav class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <a href="../../../index.html" class="text-primary flex items-center" onclick="saveLastVisitedPage()">
                    <i class="fa fa-connectdevelop text-2xl mr-2"></i>
                    <span class="font-bold text-xl text-dark">ev</span>
                </a>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#overview" class="text-gray-600 hover:text-primary transition-colors">鏈嶅姟浠嬬粛</a>
                <a href="#process" class="text-gray-600 hover:text-primary transition-colors">瀹氬埗娴佺▼</a>
                <a href="#form" class="text-gray-600 hover:text-primary transition-colors">棰勭害琛ㄥ崟</a>
                <a href="#faq" class="text-gray-600 hover:text-primary transition-colors">甯歌�闂��</a>
            </div>
            <a href="#form" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full font-medium transition-all shadow-md hover:shadow-lg hidden md:block">
                织嬪嵆棰勭害
            </a>
            <button class="md:hidden text-gray-600" id="menuToggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 绉诲姩绔�彍鍗?-->
        <div class="md:hidden hidden bg-white border-t" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="#overview" class="text-gray-600 hover:text-primary transition-colors py-2">鏈嶅姟浠嬬粛</a>
                <a href="#process" class="text-gray-600 hover:text-primary transition-colors py-2">瀹氬埗娴佺▼</a>
                <a href="#form" class="text-gray-600 hover:text-primary transition-colors py-2">棰勭害琛ㄥ崟</a>
                <a href="#faq" class="text-gray-600 hover:text-primary transition-colors py-2">甯歌�闂��</a>
                <a href="#form" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-full font-medium transition-all shadow-md hover:shadow-lg text-center">
                    织嬪嵆棰勭害
                </a>
            </div>
        </div>
    </nav>

    <!-- 鑻遍泟鍖哄煙 -->
    <header class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-blue-50 to-indigo-50">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-4">
                    杞欢绉佷汉瀹氬埗<br>
                    <span class="text-primary">涓撳睘鎮ㄧ殑瑙ｅ喅鏂规�</span>
                </h1>
                <p class="text-lg text-gray-600 mb-8 max-w-lg">
                    鎴戜滑鎻愪緵涓撲笟鐨勮蒋浠跺紑鍙戝畾鍒舵湇鍔★紝浠庨渶姹傚バー鏋愬埌涓婄嚎杩愮淮锛屽叏绋嬩负鎮ㄦ彁渚涗竴瀵逛竴鐨勬妧鏈�敮鎸侊紝鎵撻€犵湡姝ｇ�鍚堟偍涓氬姟闇€姹傜殑涓撳睘杞�欢銆?
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="#form" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-full font-semibold transition-all shadow-lg hover:shadow-xl text-center">
                        织嬪嵆棰勭害瀹氬埗
                    </a>
                    <a href="#process" class="bg-white hover:bg-gray-50 text-primary border-2 border-primary px-8 py-4 rounded-full font-semibold transition-all shadow-md hover:shadow-lg text-center">
                        浜嗚В瀹氬埗娴佺▼
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 relative">
                <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl transform rotate-1 hover:rotate-0 transition-transform duration-500">
                    <img src="../../images/software.jpg" alt="杞欢寮€鍙戝畾鍒舵湇鍔? class="w-full h-auto">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                        <div class="p-6 text-white">
                            <p class="font-medium">涓撲笟鍥㈤槦 路 瀹氬埗寮€鍙?路 鍏ㄧ▼鏀�寔</p>
                        </div>
                    </div>
                </div>
                <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-primary/20 rounded-full blur-2xl -z-10"></div>
                <div class="absolute -top-6 -right-6 w-32 h-32 bg-secondary/20 rounded-full blur-2xl -z-10"></div>
            </div>
        </div>
    </header>

    <!-- 鏈嶅姟浠嬬粛 -->
    <section id="overview" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">鎴戜滑鐨勫畾鍒舵湇鍔?/h2>
                <p class="text-gray-600 max-w-2xl mx-auto">鏍规 Bakan€姹傦紝鎴戜滑鎻愪緵鍏ㄦ柟浣嶇殑杞�欢寮€鍙戝畾鍒舵湇鍔?/p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gray-50 rounded-xl p-6 shadow-sm hover-scale">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-5">
                        <i class="fa fa-desktop text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Web搴旂敤寮€鍙?/h3>
                    <p class="text-gray-600">瀹氬埗鍚勭被浼佷笟绾�eb搴旂敤锛屽寘鎷��鐞嗙郴缁熴€佹暟鎹�バー鏋愬钩鍙般€佺數瀛愬晢鍔＄綉绔欑瓑锛屾弧瓒虫偍鐨勫悇绉嶄笟鍔￠渶姹傘€?/p>
                </div>

                <div class="bg-gray-50 rounded-xl p-6 shadow-sm hover-scale">
                    <div class="w-14 h-14 bg-secondary/10 rounded-full flex items-center justify-center mb-5">
                        <i class="fa fa-mobile text-secondary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">绉诲姩搴旂敤寮€鍙?/h3>
                    <p class="text-gray-600">寮€鍙慽OS鍜孉ndroid骞冲彴鐨勭Щ鍔ㄥ簲鐢�紝鎻愪緵鍘熺敓寮€鍙戞垨娣峰悎寮€鍙戞柟妗堬紝鎵撻€犳祦鐣呯殑绉诲姩浣撻獙銆?/p>
                </div>

                <div class="bg-gray-50 rounded-xl p-6 shadow-sm hover-scale">
                    <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-5">
                        <i class="fa fa-cloud text-purple-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">绯荤粺闆嗘垚鏈嶅姟</h3>
                    <p class="text-gray-600">灏嗙幇鏈夌郴缁�繘琛屾暣鍚堬紝鎻愪緵API寮€鍙戙€佹暟鎹�縼绉汇€佺郴缁熷�鎺ョ瓑鏈嶅姟锛屽疄鐜颁笟鍔℃祦绋�瓑鏈嶅姟鍣?/p>
                </div>
            </div>
        </div>
    </section>

    <!-- 瀹氬埗娴佺▼ -->
    <section id="process" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">杞�欢瀹氬埗娴佺▼</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">鎴戜滑閬靛惊鏍囧噯鍖栫殑杞�欢寮€鍙戞祦绋嬶紝纭�繚椤圭洰璐ㄩ噺鍜屼氦浠樻晥鐜?/p>
            </div>

            <div class="relative">
                <!-- 杩炴帴绾?-->
                <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 -translate-x-1/2"></div>
                
                <div class="space-y-12 md:space-y-0">
                    <!-- 姝ラ�1 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
                            <h3 class="text-xl font-semibold text-dark mb-2">闇€姹傚バー鏋愪笌瑙勫垝</h3>
                            <p class="text-gray-600">鎴戜滑鐨勫洟闃熷皢涓庢偍娣卞叆娌熼€氾紝浜嗚В鎮ㄧ殑涓氬姟闇€姹傚拰鐩�爣锛屽埗瀹氳�缁嗙殑鍔�兘瑙勫垝鍜岄」鐩�柟妗堛€?/p>
                        </div>
                        <div class="z-10 flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white font-bold text-xl shadow-lg">1</div>
                        <div class="md:w-1/2 md:pl-12 hidden md:block"></div>
                    </div>

                    <!-- 姝ラ�2 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 hidden md:block"></div>
                        <div class="z-10 flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white font-bold text-xl shadow-lg">2</div>
                        <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                            <h3 class="text-xl font-semibold text-dark mb-2">璁捐�涓庡師鍨?/h3>
                            <p class="text-gray-600">鏍规 Bakan€姹傛枃妗ｏ紝鎴戜滑鐨勮�璁″洟闃熷皢鍒涘缓UI璁捐�绋垮拰浜や簰鍘熷瀷锛岃�鎮ㄦ彁鍓嶄綋楠岃蒋浠剁殑澶栬�鍜屽姛鑳姐€?/p>
                        </div>
                    </div>

                    <!-- 姝ラ�3 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
                            <h3 class="text-xl font-semibold text-dark mb-2">寮€鍙戜笌娴嬭瘯</h3>
                            <p class="text-gray-600">鎴戜滑鐨勫紑鍙戝洟闃熸寜鐓ц�璁℃枃妗ｈ繘琛岀紪鐮 volunte繀鐜帮紝鍚屾椂杩涜�涓ユ牸鐨勬祴璇曪紝纭�繚杞�欢璐ㄩ噺鍜岀ǔ瀹氭€с€?/p>
                        </div>
                        <div class="z-10 flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white font-bold text-xl shadow-lg">3</div>
                        <div class="md:w-1/2 md:pl-12 hidden md:block"></div>
                    </div>

                    <!-- 姝ラ�4 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 hidden md:block"></div>
                        <div class="z-10 flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white font-bold text-xl shadow-lg">4</div>
                        <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                            <h3 class="text-xl font-semibold text-dark mb-2">閮ㄧ讲涓庝笂绾?/h3>
                            <p class="text-gray-600">瀹屾垚寮€鍙戝拰娴嬭瘯鍚庯紝鎴戜滑灏嗗崗鍔╂偍杩涜�杞�欢閮ㄧ讲鍜屼笂绾匡紝骞舵彁渚涘繀瑕佺殑鎶€鏈�敮鎸佸拰鍩硅�銆?/p>
                        </div>
                    </div>

                    <!-- 姝ラ�5 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
                            <h3 class="text-xl font-semibold text-dark mb-2">杩愮淮涓庣淮鎶?/h3>
                            <p class="text-gray-600">杞�欢涓婄嚎鍚庯紝鎴戜滑鎻愪緵鎸佺画鐨勬妧鏈�敮鎸佸拰缁存姢鏈嶅姟锛岀‘淇濊蒋浠剁ǔ瀹氳繍琛屽苟涓嶆柇浼樺寲鍜屽崌绾с€?/p>
                        </div>
                        <div class="z-10 flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white font-bold text-xl shadow-lg">5</div>
                        <div class="md:w-1/2 md:pl-12 hidden md:block"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 棰勭害琛ㄥ崟 -->
    <section id="form" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">棰勭害瀹氬埗琛ㄥ崟</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">璇峰～鍐欎互涓嬩俊鎭�紝鎴戜滑鐨勪笓涓氬洟闃熷皢灏藉揩涓庢偍鑱旂郴锛屼负鎮ㄦ彁渚涘畾鍒舵柟妗?/p>
            </div>

            <div class="max-w-3xl mx-auto bg-gray-50 rounded-xl p-8 shadow-sm">
                <form id="customForm" class="space-y-6">
                    <!-- 鍩烘湰淇℃伅 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">濮撳悕 <span class="text-red-500">*</span></label>
                            <input type="text" id="name" name="name" required
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus"
                                placeholder="璇疯緭鍏ユ偍鐨勫�鍚?>
                        </div>
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">鑱旂郴鐢佃瘽 <span class="text-red-500">*</span></label>
                            <input type="tel" id="phone" name="phone" required
                                class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus"
                                placeholder="璇疯緭鍏ユ偍鐨勮仈绯荤數璇?>
                        </div>
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">鐢靛瓙閭�� <span class="text-red-500">*</span></label>
                        <input type="email" id="email" name="email" required
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus"
                            placeholder="璇疯緭鍏ユ偍鐨勭數瀛愰偖绠?>
                    </div>

                    <div>
                        <label for="company" class="block text-sm font-medium text-gray-700 mb-1">鍏�徃鍚嶇О</label>
                        <input type="text" id="company" name="company"
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus"
                            placeholder="璇疯緭鍏ユ偍鐨勫叕鍙稿悕绉帮紙閫夊～锛?>
                    </div>

                    <!-- 杞�欢绫诲瀷 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">杞�欢绫诲瀷 <span class="text-red-500">*</span></label>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                                <input type="radio" name="softwareType" value="web" required class="mr-2">
                                <span>Web搴旂敤</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                                <input type="radio" name="softwareType" value="mobile" required class="mr-2">
                                <span>绉诲姩搴旂敤</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                                <input type="radio" name="softwareType" value="system" required class="mr-2">
                                <span>绯荤粺闆嗘垚</span>
                            </label>
                        </div>
                    </div>

                    <!-- 璇︾粏闇€姹?-->
                    <div>
                        <label for="requirements" class="block text-sm font-medium text-gray-700 mb-1">璇︾粏闇€姹傛弿杩?<span class="text-red-500">*</span></label>
                        <textarea id="requirements" name="requirements" rows="6" required
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus resize-none"
                            placeholder="璇疯�缁嗘弿杩版偍鐨勮蒋浠堕渶姹傦紝鍖呮嫭鍔�兘鐗圭偣銆佺洰鏍囩敤鎴枫€佹湡鏈涙晥鏋滅瓑淇℃伅锛岃秺璇︾粏瓒婃湁鍔╀簬鎴戜滑涓烘偍鎻愪緵绮惧噯鐨勫畾鍒舵柟妗?.."></textarea>
                    </div>

                    <!-- 棰勭畻鑼冨洿 -->
                    <div>
                        <label for="budget" class="block text-sm font-medium text-gray-700 mb-1">棰勭畻鑼冨洿 <span class="text-red-500">*</span></label>
                        <select id="budget" name="budget" required
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus">
                            <option value="">璇烽€夋嫨棰勭畻鑼冨洿</option>
                            <option value="5000-10000">5,000 - 10,000鍏?/option>
                            <option value="10000-30000">10,000 - 30,000鍏?/option>
                            <option value="30000-50000">30,000 - 50,000鍏?/option>
                            <option value="50000-100000">50,000 - 100,000鍏?/option>
                            <option value="100000+">100,000鍏冧互涓?/option>
                        </select>
                    </div>

                    <!-- 鏈熸湜浜や粯鏃堕棿 -->
                    <div>
                        <label for="deliveryTime" class="block text-sm font-medium text-gray-700 mb-1">鏈熸湜浜や粯鏃堕棿 <span class="text-red-500">*</span></label>
                        <input type="date" id="deliveryTime" name="deliveryTime" required
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus">
                    </div>

                    <!-- 鍏朵粬闇€姹?-->
                    <div>
                        <label for="additional" class="block text-sm font-medium text-gray-700 mb-1">鍏朵粬闇€姹傛垨璇存槑</label>
                        <textarea id="additional" name="additional" rows="3"
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 form-focus resize-none"
                            placeholder="璇峰～鍐欏叾浠栨偍璁や负闇€瑕佽�鏄庣殑淇℃伅锛堥€夊～锛�```
